<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>什么值得买排行榜</title>
    <link rel="stylesheet" href="styles/icon.css" />
    <link rel="stylesheet" href="styles/style.css" />
  </head>
  <body>
    <div class="page">
      <header class="top">
        <div class="top-title">排行榜</div>
        <nav class="tabs">
          <ul>
            <li class="tab-item tab-active">
              <img
                src="imgs/icon_article.webp"
                class="icon-article-hot"
                alt="好文精选"
              />好文精选
            </li>
            <li class="tab-item">
              <img
                src="imgs/icon_hot.webp"
                class="icon-article-hot"
                alt="热门资讯"
              />热门资讯
            </li>
          </ul>
        </nav>
        <nav class="cats">
          <ul class="cat-list">
            <li class="cat-item cat-active">文章</li>
          </ul>
        </nav>
      </header>
      <main class="list">
        <a href="https://www.wust.edu.cn/" class="sku">
          <div class="content">

            <div class="cover">
              <img src="imgs/image.png" class="cover-img" />
              <img src="imgs/rank-top1.png" class="cover-rank" />
            </div>

            <div class="info">
              <div class="sku-title">
                <span>凡事皆有利于我。</span>
                <br>
                <span>内心丰盈者，独行亦如众</span>
              </div>

              <div class="desc">
                <i class="iconfont icon-comment"></i>
                <span class="desc-number">98</span>
                <i class="iconfont icon-thumb"></i>
                <span class="desc-number">520</span>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/MHW2.jpg" class="cover-img" />
              <img src="imgs/rank-top2.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">Moster Hunter World</div>
              
              <div class="desc">
                <i class="iconfont icon-comment"></i>
                <span class="desc-number">53</span>
                <i class="iconfont icon-thumb"></i>
                <span class="desc-number">66</span>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/blender1.jpg" class="cover-img" />
              <img src="imgs/rank-top3.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">
                Blender适合业余小白的3D建模软件
              </div>
              
              <div class="desc">
                <i class="iconfont icon-comment"></i>
                <span class="desc-number">17</span>
                <i class="iconfont icon-thumb"></i>
                <span class="desc-number">13</span>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/sku-4.jpg" class="cover-img" />
              <img src="imgs/rank-top4.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">
                SK-II大红瓶面霜肌源修护精华霜淡保湿淡化滋润 80g/瓶
              </div>
              
              <div class="desc">
                <i class="iconfont icon-comment"></i>
                <span class="desc-number">98</span>
                <i class="iconfont icon-zhi"></i>
                <span class="desc-number">67%</span>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/sku-5.jpg" class="cover-img" />
              <img src="imgs/rank-top5.png" class="cover-rank" />
            </div>
            <div class="info">
              <div class="sku-title">
                Apple 苹果 iPad Air 4 10.9英寸 平板电脑 64GB WLAN
              </div>
              
              <div class="desc">
                <i class="iconfont icon-comment"></i>
                <span class="desc-number">285</span>
                <i class="iconfont icon-thumb"></i>
                <span class="desc-number">86</span>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="sku">
          <div class="content">
            <div class="cover">
              <img src="imgs/sku-6.jpg" class="cover-img" />
            </div>
            <div class="info">
              <div class="sku-title">
                EPIC商城喜加一！动作中文游戏《井中生物》限时免费！
              </div>
              
              <div class="desc">
                <i class="iconfont icon-comment"></i>
                <span class="desc-number">18</span>
                <i class="iconfont icon-thumb"></i>
                <span class="desc-number">100</span>
              </div>
            </div>
          </div>
        </a>
      </main>
    </div>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" title="回到顶部">↑</button>

    <script>
      // 回到顶部按钮功能
      const backToTopBtn = document.getElementById('backToTop');
      const mainElement = document.querySelector('.list'); // 获取main元素
      
      // 监听main元素的滚动事件，控制按钮显示/隐藏
      mainElement.addEventListener('scroll', function() {
        if (mainElement.scrollTop > 300) {
          backToTopBtn.style.display = 'block';
        } else {
          backToTopBtn.style.display = 'none';
        }
      });
      
      // 点击按钮回到main元素顶部
      backToTopBtn.addEventListener('click', function() {
        mainElement.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    </script>
  </body>
</html>
